<template>
	<view>
		<view class="u-page">

			<view class="list-head">
				<view class="u-flex">
					<view class="u-flex-3 u-text-center">
						<view >支出</view>
						<view class="list-head-content" v-if="myConfig.showTotal">{{monthTotal.out}}</view>
						<view class="list-head-content" v-if="!myConfig.showTotal">****</view>
					</view>
					<view class="u-flex-3 u-text-center">
						<view >收入</view>
						<view class="list-head-content" v-if="myConfig.showTotal">{{monthTotal.in}}</view>
						<view class="list-head-content" v-if="!myConfig.showTotal">****</view>
					</view>
					<view class="u-flex-3 u-text-center">
						<view class="u-flex-3 u-text-center" @tap="show = true">
							<view >{{year}}</view>
							<view class="list-head-content" >{{month}}<u-icon style="font-size:20rpx" name="arrow-down-fill"></u-icon></view>
							<u-picker v-model="show" mode="time" :params="params" @confirm="confirmTime"></u-picker>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 170rpx;">
				<u-card v-for="(item, index) in dayList" :key="index" box-shadow="3px 3px 2px #888888" padding="18">
					<view slot="head">
						<view class="u-flex">
							<view class="u-flex-6" style="font-size: 32rpx; font-weight: 700;">
								<u-icon name="bookmark-fill" color="#4577BC"></u-icon>
								{{item.dayName}}
							</view>
							<view class="u-flex-6 u-text-right" style="font-size: 25rpx; font-weight: 700;">
								支出 <span style="color: #DD6161; padding-left: 10rpx;" >{{item.out}}</span>
							</view>
							<view class="u-flex-6 u-text-right" style="font-size: 25rpx; font-weight: 700;">
								收入 <span style="color: #18B566; padding-left: 10rpx;" >{{item.in}}</span>
							</view>
						</view>
					</view>

					<view slot="body">
						<view v-for="(subItem, subIndex) in item.list" :key="subIndex">
							<view class="u-flex" @click="edit(subItem)">
								<view class="u-flex-6" style="font-size: 32rpx; ">
									<u-icon :name="subItem.typeIcon" custom-prefix="custom-icon"  
										style="font-size: 50rpx; padding: 15rpx 5rpx 15rpx 25rpx; color:#2979FF"></u-icon>
									<span style="padding-left: 10rpx;" >{{subItem.typeName}}</span>
									<span style="padding-left: 50rpx; font-size:25rpx" >{{subItem.remark}}</span>
								</view>
								<view class="u-flex-6 u-text-right" style="font-size: 25rpx; ">
									<span style="color: #DD6161; padding-right: 20rpx;" v-show="subItem.type === 0">-{{subItem.money}}</span>
									<span style="color: #18B566; padding-right: 20rpx;" v-show="subItem.type === 1">+{{subItem.money}}</span>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</view>
						</view>
					</view>
				</u-card>
			</view>
			<!-- 所有内容的容器 -->
		</view>
		<!-- 自定义tabbar -->
		<xm-tabbar></xm-tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				monthTotal : {},
				dayList : [],
				show: false,
				params: {
					year: true,
					month: true,
					day: false,
					hour: false,
					minute: false,
					second: false,
					timestamp: true,
				},
				time: new Date(),
				month: "XX月",
				year: "XX年",
			}
		},
		onShow(){
			this.init();
		},
		methods:{
			// 初始化数据
			init(){
				this.monthTotal = this.xmU.getMonthTotal(this.recordList, this.time, [this.myConfig.userId]);
				this.dayList = this.xmU.getDayList(this.recordList, this.typeList, this.time, [this.myConfig.userId]);
				this.year = this.$u.timeFormat(this.time, "yyyy年");
				this.month = this.$u.timeFormat(this.time, "mm月");	
			},
			
			// 修改记录信息
			edit(item){
				this.$u.route({
					url : '/pages/detail/edit-item',
					params : item,
				})
			},
			// 修改月份
			confirmTime(val){
				this.time = this.$u.timeFormat(val.timestamp, "yyyy-mm-dd hh:MM:ss");
				this.init();
			},
		}
	}
</script>

<style>
.list-head{
	background-color: #2B85E4; 
	padding: 30rpx 10rpx 10rpx 10rpx;
	font: small-caps bold 25rpx serif;
	color: #FFFFFF;
	/* height: 177dp; */
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 1000;
}
.list-head-content{
	padding: 10rpx 0rpx 0rpx 10rpx;
	font: small-caps bold 40rpx serif;
}
</style>